<template>
  <div class="tree-container">
    <div class="betweenbox">
      <div class="filterinput">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          <i slot="prefix" class="el-input__icon el-icon-search search"></i>
        </el-input>
      </div>
      <div class="centerbox setting">
        <span class="el-icon-s-tools"></span>
      </div>
    </div>
    <div class="jklb">监控列表</div>
    <el-tree
      :load="loadNode"
      lazy
      icon-class="custom"
      :props="defaultProps"
      ref="tree"
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
    >
      <div class="custom-tree-node betweenbox" slot-scope="{ node }">
        <div>
          <span>{{ node.label }}</span>
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { Tree } from "element-ui";
interface treeItem {
  children?: treeItem[];
  menu: boolean;
  name: string;
}

@Component
export default class extends Vue {
  defaultProps: Object = {
    children: "children",
    label: "name",
  };

  filterText: string = "";

  $refs!: {
    tree: Tree;
  };
  @Watch("filterText")
  private watchfilterText(val: string) {
    let tree = this.$refs.tree;
    // console.log(tree);

    if (tree) {
      tree.filter(val);
    }
  }
  // 树图加载
  loadNode(node, resolve) {
    let params: any;
    if (node.level > 0) {
      let data = node.data;
      params = {
        id: data.id,
        type: data.type,
      };
    }
    (this as any).$services
      .downloadstationTree({ data: params })
      .then((result: any) => {
        let data = result.data;
        resolve(data);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  handleNodeClick(data: Object) {}
  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
}
</script>

<style lang="scss" scoped>
.tree-container {
  .custom-tree-node {
    width: 100%;
    height: 0.3rem;
    box-sizing: border-box;
    line-height: 0.3rem;
    .context-menu {
      span {
        margin: 0rem 0.02rem;
      }
    }
  }
  .jklb {
    margin: 0.2rem 0rem 0.1rem;
  }
  .search {
    width: 0.3rem;
    height: 0.3rem;
    border-right: 1px solid #717ca1;
    color: #9eeaec;
  }
  .filterinput {
    width: calc(100% - 0.5rem);
  }
  .setting {
    width: 0.5rem;
    font-size: 0.26rem;
    cursor: pointer;
  }
}
</style>

